<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>国际象棋</title>
</head>

<body>
  <div id="box">
    <div id="help">
      <table>
        <tbody>
          <tr>
            <th>指令</th>
            <th>说明</th>
            <th>示例</th>
          </tr>
          <tr>
            <th>发起/加入中国象棋<br></td>
            <td>发起游戏</td>
            <td>#发起中国象棋、#加入中国象棋</td>
          </tr>
          <tr>
            <th>加入中国象棋+黑/红<br></td>
            <td>游戏中途加入队伍，加入队伍后可操作棋盘</td>
            <td>#加入中国象棋黑、#加入中国象棋红</td>
          </tr>
          <tr>
            <th>移子</td>
            <td>移动棋子，移动+选择+目的地，示例中意思为将D4的兵移动到E4的位置，字母不区分大小写</td>
            <td>#移子D4E4</td>
          </tr>
          <tr>
            <th>移子</td>
            <td>移动棋子，棋子名称+列数+方向+步数，示例中意思为将D4的兵移动到E4的位置，需全中文，不区分大小写和简繁体，具体详情请百度</td>
            <td>兵五进一</td>
          </tr>
          <tr>
            <th>结束中国象棋</td>
            <td>认输</td>
            <td>#结束中国象棋</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div style="text-align: center;">{{ AppName }} / {{AppVersion}}</div>

  <style>
    body {
      background-color: bisque;
    }

    #app {
      display: flex;
    }

    #box {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
    }

    .b {
      background-image: url('{{_res}}img/b_box.png');
    }

    .r {
      background-image: url('{{_res}}img/r_box.png');
    }

    .latticebox {
      width: 100%;
      height: 100%;
      background-size: cover;
    }

    #box .lattice {
      width: 73px;
      height: 75px;
      margin: 0rem 0.15rem;
      background-size: cover;
    }

    th {
      text-align: center;
      background-color: #fddbb3;
    }

    th,
    td,
    th,
    #help {
      border: 2px solid #B58863;
      border-left-color: #fff;
      border-top-color: #fff;
      text-align: left;
      padding: 8px;
    }
  </style>

</body>

</html>